<template>
  <div id="Job" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">职务信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editJob" :rules="rules" ref="editJob" label-width="150px">
          <div class="row">
            <div class="col-md-6">
              <el-form-item label="岗位类别" :required='true'>
                <el-select :disabled="!isEditable" v-model="editJob.postType" placeholder="请选择岗位类别" @change="postTypeChanged">
                  <el-option v-for="item in this.$store.state.sysconfigs.postTypes" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col-md-6">
              <el-form-item label="岗位级别" :required='true'>
                <el-select :disabled="!isEditable" v-model="editJob.positionlevel" placeholder="请选择岗位级别">
                  <el-option v-for="item in positionlevels" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <el-form-item label="职务">
                <el-select :disabled="!isEditable" clearable v-model="editJob.positions" multiple placeholder="请选择职务">
                  <el-option v-for="item in this.$store.state.sysconfigs.positions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col-sm-6">
              <el-form-item label="职务级别">
                <el-select :disabled="!isEditable" clearable v-model="editJob.positionType" placeholder="请选择职务级别">
                  <el-option v-for="item in this.$store.state.sysconfigs.positionType" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Job',
    props: ["job",'editable'],
    data: function() {
      var jobValidator = (rule, value, callback) => {
        if (!value || value.length ==0) {
          callback(new Error('请输入职务信息'));
        } else {
          callback();
        }
      };
      return {
        rules:{
          positions:[{
            validator: jobValidator,
            message: "请输入职务信息",
            trigger: "change"
          }]
        },
        isEditable: true,
        positionlevels:this.$store.state.sysconfigs['positionlevels_1'],
        editJob: {
          positions: [],
          positionlevel: 1,
          postType: 1,
          positionType: ''
        }
      }
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      if (this.job) {
        for(var prop in this.job){
          this.editJob[prop]=this.job[prop]
        }

        if(this.editJob.postType){
          this.positionlevels = this.$store.state.sysconfigs['positionlevels_'+this.editJob.postType]
        }
      }
    },
    methods: {
      postTypeChanged(val){
        this.positionlevels = this.$store.state.sysconfigs['positionlevels_'+val]
      },
      getData() {
        var validRes = true
        this.$refs.editJob.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('job validate failed!!!');
            validRes = false
            return false;
          }
        });
        console.log("job:", JSON.stringify(this.editJob));
        if (!validRes) {
          return null
        }
        return this.editJob
      }
    }
  }
</script>